<template>
  <div class="container">
    <div class="container--item">
      <div class="container--item__header">
        <img src="../assets/register/left.png"
             @click="$router.push({ name: 'shoppingMall'})" class="header--img__left" alt="#">
        <div class="container--header__text">
          <span @click="commodity" :style="{color: index === 1? '#186ee3': '#000'}">商品</span>
          <span @click="details" :style="{color: index === 2? '#186ee3': '#000'}">详情</span>
        </div>
        <i class="container--header__move" :style="{left: index === 1? '4rem': '5.24rem'}"></i>
        <img src="../assets/mall/share.png" class="container--img__share" alt="#">
      </div>
      <div class="container--betterScroll__move">
        <div class="container--body__count">
          <div class="swiper-container">
            <div class="swiper-wrapper">
          <span class="swiper-slide"
                v-for="(item, index) in commodityMsg.prodImage" :key="index">
            <img :src="item" alt="#">
          </span>
            </div>
            <span class="swiper-pagination container--pos__index"></span>
          </div>
          <p class="container--body__prodSubTitle">{{commodityMsg.prodSubTitle}}</p>
          <p class="container--body__discounts">该商品最高可以使用30元优惠券</p>
          <p class="container--body__killPrice">￥{{commodityMsg.currentPrice}}</p>
          <p class="container--body__quality">
            <img src="../assets/mall/quality.png" alt="#">
            <span>100%正品保证</span>
          </p>
          <p class="container--body__city">
        <span class="container--city__text">
          <span class="container--body__distribution">配送至</span>
          <span class="container--body__detail">湖北省黄冈市</span>
          <img src="../assets/PersonalEnter/right.png" class="container--city__img" alt="#">
        </span>
            <span class="container--body__true">有货</span>
          </p>
          <p class="container--body__option">
            <span class="container--option__choice">已选</span>
            <span class="container--option__choice">1件</span>
          </p>
          <div class="container--body__particulars">
            <p class="container--particulars__header">
              <span class="container--particulars__left"></span>
              <span class="container--particulars__text">商品详情</span>
            </p>
            <img
              :src="item" alt=""
              v-for="(item, key) in commodityMsg.prodImage"
              :key="key" class="container--img__particulars">
          </div>
        </div>
      </div>
      <div class="container--bottom__ShoppingCart">
        <div class="container--img__box">
          <img src="../assets/mall/shoppingCart.png"
               @click="shoppingCart" alt="#" class="container--img__bottom">
          <span class="container--img__right" v-if="imgRightNum">{{imgRightNum}}</span>
        </div>
        <span class="container--bottom__btn">
        <span class="container--bottom__add" @click="addShoppingCart">加入购物车</span>
        <span class="container--bottom__add color">立即购买</span>
      </span>
      </div>
    </div>
    <div class="container--mask__pupop" v-if="pupopBoole" @click.self="pupopBoole = false">
      <div class="container--body__count">
        <div class="container--body__header">
          <img :src="commodityMsg.prodImage[0]" alt="#">
          <span class="container--item__killPrice">￥{{commodityMsg.currentPrice}}</span>
          <span class="container--item__prodId">商品编号：{{commodityMsg._id}}</span>
        </div>
        <div class="container--item__num">
          <span class="container--item__Number">数量</span>
          <span class="container--item__subtract" @click="num === 0? num = 0: num --">-</span>
          <span class="container--item__digit container--item__subtract">{{num}}</span>
          <span class="container--item__plus container--item__subtract" @click="num ++">+</span>
        </div>
        <div class="container--item__btn" @click="addCart">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable*/
export default {
  name: 'detailPage',
  data() {
    return {
      index: 1,
      swiper: null,
      swiperIndex: null,
      betterScroll: null,
      commodityMsg: null,
      pupopBoole: false,
      num: 1,
      imgRightNum: null,
    };
  },
  methods: {
    swipers() {
      this.swiper = new this.$Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true, // 循环模式选项
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
      });
    },
    shoppingCart() {
      this.$router.push({ name: 'shoppingCart', params: this.commodityMsg });
    },
    addShoppingCart() {
      this.pupopBoole = true;
    },
    addCart() {
      this.pupopBoole = false;
      this.$api.cart({
        prodid: this.commodityMsg._id,
        num: this.num,
      })
        .then(data => {
          if (data.data.code === 1) {
            this.$api.getCartNum()
              .then(data => {
                this.imgRightNum = data.data.data.cartCount;
                this.$bus.$emit('imgRightNum', this.imgRightNum)
              })
              .catch(error => {
                console.log(error);
              })
          }
        })
        .catch(error => {
          console.log(error);
        });

    },
    commodity() {
      this.index = 1;
      this.betterScroll.scrollTo(0, 0, 500);
    },
    details() {
      this.index = 2;
      this.betterScroll.scrollTo(0, -650, 500);
    },
  },
  mounted() {
    this.swipers();
    this.$nextTick(() => {
      if (!this.betterScroll) {
        this.betterScroll = new this.$Bs('.container--betterScroll__move', {
          screenY: true,
          screenX: false,
          click: true,
        });
      } else {
        this.betterScroll.refresh();
      }
    });
  },
  created() {
    this.commodityMsg = JSON.parse(this.$route.params.data);
    console.log(this.commodityMsg);
    this.$api.getCartNum()
      .then(data => {
        console.log(data);
        this.imgRightNum = data.data.data.cartCount;
      })
      .catch(error => {
        console.log(error);
      })
  },
};
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .container{
    width: 100vw;
    background-color: #ccc;
    .container--item{
      .container--item__header{
        position: relative;
        width: 100vw;
        height: 1.25rem;
        text-align: center;
        background-color: #fff;
        margin-bottom: 0.13333rem;
        .header--img__left{
          position: absolute;
          width: .5rem;
          height: .5rem;
          padding: .367rem;
          left: 0;
          z-index: 999;
        }
        .container--header__text{
          display: inline-block;
          width: 2.5rem;
          span{
            display: inline-block;
            line-height: 1.25rem;
            text-align: center;
            font-size: .37rem;
            width: 1.25rem;
          }
        }
        .container--img__share{
          position: absolute;
          width: .4rem;
          height: .4rem;
          right: 0;
          padding: .367rem;
          z-index: 999;
        }
        .container--header__move{
          position: absolute;
          width: .8rem;
          height: 4px;
          background-color: #186ee3;
          top: 1rem;
          transition: left .3s ease;
        }
      }
      .container--betterScroll__move{
        width: 100vw;
        height: 84vh;
        overflow: hidden;
        .container--body__count{
          background-color: #fff;
          .swiper-container{
            height: (750/75) + rem;
            margin-bottom: (45/75) + rem;
            .swiper-slide{
              img{
                width: 100vw;
                height: (750/75) + rem;
              }
            }
          }
          .container--body__prodSubTitle{
            font-size: .37rem;
            font-weight: 700;
            margin-left: .35rem;
            margin-bottom: .2rem;
          }
          .container--body__discounts{
            font-size: .35rem;
            color: #fa3f3f;
            margin-left: .35rem;
            margin-bottom: .3rem;
          }
          .container--body__killPrice{
            font-size: .5rem;
            margin-left: .35rem;
          }
          .container--body__quality{
            padding-left: .35rem;
            line-height: (80/75) + rem;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            margin-top: .2rem;
            img{
              width: .6rem;
              height: .6rem;
              vertical-align: middle;
            }
            span{
              font-size: .35rem;
              vertical-align: middle;
              margin-left: .3rem;
            }
          }
          .container--body__city{
            position: relative;
            height: (145/75) + rem;
            border-bottom: 1px solid #ccc;
            .container--city__text{
              display: inline-block;
              margin-left: .35rem;
              margin-top: .3rem;
              .container--city__img{
                width: .5rem;
                height: .5rem;
                position: absolute;
                right: .35rem;
                top: .3rem;
              }
              .container--body__distribution{
                font-size: .4rem;
                color: #666666;
              }
              .container--body__detail{
                font-size: .4rem;
                font-weight: 600;
                margin-left: .3rem;
              }
            }
            .container--body__true{
              border-radius: 10px;
              border: 1px solid #fa9549;
              font-size: .35rem;
              text-align: center;
              color: #fa9549;
              display: block;
              width: (89/75) + rem;
              line-height: (41/75) + rem;
              margin-left: 19%;
              margin-top: .3rem;
            }
          }
          .container--body__option{
            line-height: (82/75) + rem;
            margin-bottom: 0.13333rem;
            .container--option__choice{
              margin-left: .35rem;
              font-size: .35rem;
              color: #999999;
            }
          }
          .container--body__particulars{
            .container--particulars__header{
              width: 100vw;
              line-height: (95/75) + rem;
              .container--particulars__left{
                display: inline-block;
                margin-left: .35rem;
                width: 4px;
                height: .5rem;
                background-color: #3d9dfd;
                vertical-align: middle;
              }
              .container--particulars__text{
                font-size: .4rem;
                margin-left: .35rem;
                vertical-align: middle;
              }
            }
            .container--img__particulars{
              width: 100vw;
            }
          }
          .container--pos__index{
            position: absolute;
            left: 86%;
            border-radius: (30/75) + rem;
            text-align: center;
            font-size: .35rem;
            display: inline-block;
            width: (80/75) + rem;
            line-height: (42/75) + rem;
            background: rgba(0, 0, 0, 0.3);
            z-index: 999;
          }
        }
      }
      .container--bottom__ShoppingCart{
        position: fixed;
        bottom: 0;
        width: 100vw;
        background-color: #fff;
        height: (104/75) + rem;
        .container--img__box{
          display: inline-block;
          position: relative;
          left: 10%;
          top: .35rem;
          img{
            width: .7rem;
            height: .7rem;
            display: inline-block;
            margin-bottom: .35rem;
          }
          span{
            width: .5rem;
            line-height: .5rem;
            font-size: .35rem;
            position: absolute;
            left: .4rem;
            top: -.2rem;
            background-color: red;
            color: #fff;
            border-radius: 50%;
            text-align: center;
          }
        }
        .container--bottom__btn{
          display: inline-block;
          position: absolute;
          right: .35rem;
          top: .175rem;
          width: 70.4%;
          height: (76/75) + rem;
          vertical-align: top;
          border-radius: .5rem;
          .container--bottom__add{
            font-size: .37rem;
            color: #fff;
            display: inline-block;
            width: 50%;
            line-height: (76/75) + rem;
            text-align: center;
            border-radius: .5rem 0 0 .5rem;
            background-color: #f9792f;
          }
          .color{
            background-color: #3d9dfd;
            border-radius: 0 .5rem .5rem 0;
          }
        }
      }
    }
    .container--mask__pupop{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: rgba(0,0,0,.3);

      .container--body__count{
        position: absolute;
        bottom: 0;
        width: 100vw;
        height: (961/75) + rem;
        background: #fff;
      }
      .container--body__header{
        position: relative;
        left: .35rem;
        right: .35rem;
        width: 92.5%;
        height: (198/75) + rem;
        border-bottom: 1px solid #ccc;
        img{
          position: absolute;
          bottom: (43/75) + rem;
          width: (221/75) + rem;
          height: (221/75) + rem;
        }
        .container--item__killPrice{
          position: absolute;
          left: 37%;
          top: .35rem;
          font-size: .4rem;
          color: #ff3000;
        }
        .container--item__prodId{
          position: absolute;
          left: 37%;
          top: 1rem;
          width: 6rem;
          font-size: .35rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .container--item__Number{
        position: absolute;
        left: -1.2rem;
        top: .2rem;
        font-size: .35rem;
      }
      .container--item__num{
        width: (184/75) + rem;
        height: (55/75) + rem;
        border:  1px solid #ccc;
        position: absolute;
        left: 1.5rem;
        top: 3rem;
        border-radius: 10px;
        .container--item__subtract{
          width: (53/75) + rem;
          display: inline-block;
          height: 100%;
          line-height: (55/75) + rem;
          border-right: 1px solid #ccc;
          text-align: center;
          font-size: .5rem;
        }
        .container--item__digit{
          border:  none;
          width: 1rem;
          font-size: .4rem;
        }
        .container--item__plus{
          float: right;
          border-right: none;
          border-left: 1px solid #ccc;
          box-sizing: border-box;
        }
      }
      .container--item__btn{
        width: 100vw;
        line-height: (90/75) + rem;
        background-color: #3d9dfd;
        text-align: center;
        position: fixed;
        bottom: 0;
        font-size: .4rem;
        color: #fff;
      }
    }
  }
</style>
